<template>
  <div class="station-manage">
    <el-card>
      <h2>充电站管理</h2>
      <el-button type="primary" @click="onAdd">新增站点</el-button>
      <el-table :data="stations" style="margin-top:20px">
        <el-table-column prop="stationID" label="站点编号" />
        <el-table-column prop="stationLoc" label="位置" />
        <el-table-column prop="stationNum" label="桩数量" />
        <el-table-column prop="stationstatus" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.stationstatus===1">正常</span>
            <span v-else-if="scope.row.stationstatus===2">维护中</span>
            <span v-else-if="scope.row.stationstatus===3">停用</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="stationManager" label="负责人">
          <template slot-scope="scope">
            <span>{{ getManagerName(scope.row.stationManager) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="onEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="onDelete(scope.row.stationID)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
      <el-form :model="form" label-width="80px">
        <el-form-item label="位置">
          <el-input v-model="form.stationLoc" />
        </el-form-item>
        <el-form-item label="桩数量">
          <el-input v-model="form.stationNum" type="number" min="1" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.stationstatus">
            <el-option label="正常" :value="1" />
            <el-option label="维护中" :value="2" />
            <el-option label="停用" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="负责人">
          <el-select v-model="form.stationManager" placeholder="请选择负责人">
            <el-option v-for="m in managers" :key="m.userID" :label="m.username" :value="m.userID" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </div>
    </el-dialog>
    <el-alert v-if="msg" :title="msg" type="success" show-icon style="margin-top:10px;" />
  </div>
</template>
<script>
import api from '@/api';
export default {
  data() {
    return {
      stations: [],
      managers: [],
      dialogVisible: false,
      dialogTitle: '新增站点',
      form: { stationID: '', stationLoc: '', stationNum: 1, stationstatus: 1, stationManager: '' },
      editMode: false,
      msg: '',
      loading: false
    };
  },
  async created() {
    await this.fetchManagers();
    await this.fetchStations();
  },
  methods: {
    async fetchManagers() {
      try {
        this.managers = await api.get('/staff/list?role=MANAGER');
      } catch (e) {
        this.msg = '获取负责人失败';
      }
    },
    getManagerName(id) {
      const m = this.managers.find(x => x.staffID === id);
      return m ? m.name : '未知';
    },
    async fetchStations() {
      this.loading = true;
      try {
        this.stations = await api.get('/station/list');
      } catch (e) {
        this.msg = '获取站点信息失败';
      }
      this.loading = false;
    },
    onAdd() {
      this.dialogTitle = '新增站点';
      this.form = { stationID: '', stationLoc: '', stationNum: 1, stationstatus: 1, stationManager: '' };
      this.editMode = false;
      this.dialogVisible = true;
    },
    onEdit(station) {
      this.dialogTitle = '编辑站点';
      this.form = { ...station };
      this.editMode = true;
      this.dialogVisible = true;
    },
    async onSave() {
      this.loading = true;
      try {
        if (this.editMode) {
          await api.post('/station/update', this.form);
        } else {
          await api.post('/station/add', this.form);
        }
        this.dialogVisible = false;
        await this.fetchStations();
        this.msg = '操作成功';
      } catch (e) {
        this.msg = '操作失败';
      }
      this.loading = false;
    },
    async onDelete(id) {
      this.loading = true;
      try {
        await api.post('/station/delete', { stationID: id });
        await this.fetchStations();
        this.msg = '删除成功';
      } catch (e) {
        this.msg = '删除失败';
      }
      this.loading = false;
    }
  }
};
</script>
<style scoped>
.station-manage { max-width: 1000px; margin: 40px auto; }
</style>
